<template>
	<view class="container">
		<view class="header">
			<text class="title">签到抽奖</text>
			<text class="subtitle">连续签到{{continuousDays}}天</text>
		</view>
		
		<view class="sign-container">
			<view class="sign-calendar">
				<view class="calendar-header">
					<text class="month">{{currentMonth}}月</text>
					<text class="year">{{currentYear}}年</text>
				</view>
				<view class="calendar-body">
					<view class="weekdays">
						<text v-for="day in weekDays" :key="day">{{day}}</text>
					</view>
					<view class="days">
						<view class="day-item" v-for="(day, index) in days" :key="index"
							:class="{ 
								'empty': !day.date,
								'signed': day.signed,
								'today': day.isToday,
								'selected': day.selected
							}"
							@click="handleSign(day)">
							<text class="day-number">{{day.date}}</text>
							<text class="day-reward" v-if="day.reward">{{day.reward}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="sign-rewards">
				<text class="rewards-title">签到奖励</text>
				<view class="rewards-list">
					<view class="reward-item" v-for="(reward, index) in signRewards" :key="index"
						:class="{ 'received': reward.received }">
						<text class="reward-day">第{{reward.day}}天</text>
						<text class="reward-value">{{reward.value}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="rules">
			<text class="rules-title">活动规则</text>
			<view class="rules-content">
				<text>1. 每日签到可获得奖励</text>
				<text>2. 连续签到奖励更丰厚</text>
				<text>3. 断签将重新计算连续天数</text>
				<text>4. 奖励将在24小时内发放</text>
			</view>
		</view>
		
		<view class="my-prizes" v-if="myPrizes.length > 0">
			<text class="prizes-title">我的奖品</text>
			<view class="prizes-list">
				<view class="prize-item" v-for="(prize, index) in myPrizes" :key="index">
					<image :src="prize.icon" mode="aspectFit" class="prize-icon"></image>
					<view class="prize-info">
						<text class="prize-name">{{prize.name}}</text>
						<text class="prize-value">{{prize.value}}</text>
					</view>
					<text class="prize-status" :class="prize.status">{{prize.statusText}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 星期数组
const weekDays = ['日', '一', '二', '三', '四', '五', '六']

// 签到奖励配置
const signRewards = [
	{ day: 1, value: '5元', received: true },
	{ day: 2, value: '10元', received: true },
	{ day: 3, value: '15元', received: true },
	{ day: 4, value: '20元', received: true },
	{ day: 5, value: '25元', received: true },
	{ day: 6, value: '30元', received: false },
	{ day: 7, value: '50元', received: false }
]

// 我的奖品
const myPrizes = ref([])

// 游戏相关
const continuousDays = ref(0)
const currentDate = new Date()
const currentYear = currentDate.getFullYear()
const currentMonth = currentDate.getMonth() + 1
const currentDay = currentDate.getDate()

// 签到记录
const signRecord = ref({
	lastSignDate: '',
	signedDays: [],
	continuousDays: 0
})

// 生成日历数据
const days = computed(() => {
	const firstDay = new Date(currentYear, currentMonth - 1, 1)
	const lastDay = new Date(currentYear, currentMonth, 0)
	const firstDayWeek = firstDay.getDay()
	
	const daysArray = []
	
	// 填充空白天数
	for (let i = 0; i < firstDayWeek; i++) {
		daysArray.push({ date: null })
	}
	
	// 填充日期
	for (let i = 1; i <= lastDay.getDate(); i++) {
		daysArray.push({
			date: i,
			signed: signRecord.value.signedDays.includes(`${currentYear}-${currentMonth}-${i}`),
			isToday: i === currentDay,
			selected: false,
			reward: signRewards[i - 1]?.value
		})
	}
	
	return daysArray
})

// 处理签到
const handleSign = (day) => {
	if (!day.date || day.signed || day.selected) return
	
	day.selected = true
	day.signed = true
	
	// 更新签到记录
	const today = `${currentYear}-${currentMonth}-${currentDay}`
	signRecord.value.signedDays.push(today)
	signRecord.value.lastSignDate = today
	
	// 计算连续签到天数
	const lastSign = new Date(signRecord.value.lastSignDate)
	const yesterday = new Date(currentDate)
	yesterday.setDate(yesterday.getDate() - 1)
	
	if (lastSign.toDateString() === yesterday.toDateString()) {
		signRecord.value.continuousDays++
	} else {
		signRecord.value.continuousDays = 1
	}
	
	continuousDays.value = signRecord.value.continuousDays
	
	// 播放音效
	const audio = uni.createInnerAudioContext()
	audio.src = '/static/audio/sign.mp3'
	audio.play()
	
	// 显示签到成功
	uni.showModal({
		title: '签到成功',
		content: `恭喜获得${day.reward}奖励`,
		showCancel: false
	})
	
	// 添加到我的奖品
	myPrizes.value.unshift({
		name: '签到奖励',
		value: day.reward,
		icon: `/static/images/games/prize-${day.reward.replace('元', '')}.png`,
		status: 'pending',
		statusText: '待领取'
	})
	
	// 保存签到记录
	saveSignRecord()
}

// 保存签到记录
const saveSignRecord = () => {
	try {
		uni.setStorageSync('signRecord', JSON.stringify(signRecord.value))
	} catch (e) {
		console.error('保存签到记录失败:', e)
	}
}

// 加载签到记录
const loadSignRecord = () => {
	try {
		const record = uni.getStorageSync('signRecord')
		if (record) {
			signRecord.value = JSON.parse(record)
			continuousDays.value = signRecord.value.continuousDays
		}
	} catch (e) {
		console.error('加载签到记录失败:', e)
	}
}

// 检查是否需要签到提醒
const checkSignReminder = () => {
	const lastSign = new Date(signRecord.value.lastSignDate)
	const today = new Date()
	
	if (lastSign.toDateString() !== today.toDateString()) {
		uni.showModal({
			title: '签到提醒',
			content: '今天还没有签到哦，快来签到领取奖励吧！',
			showCancel: true,
			success: (res) => {
				if (res.confirm) {
					// 用户点击确定，跳转到签到页面
					uni.navigateTo({
						url: '/pages/games/sign'
					})
				}
			}
		})
	}
}

// 页面加载时获取数据
onMounted(() => {
	loadSignRecord()
	checkSignReminder()
})
</script>

<style>
.container {
	padding: 20rpx;
	background-color: #F5F5F5;
	min-height: 100vh;
}

.header {
	padding: 40rpx 20rpx;
	text-align: center;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.subtitle {
	font-size: 24rpx;
	color: #666;
}

.sign-container {
	padding: 40rpx 20rpx;
}

.sign-calendar {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
}

.calendar-header {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 30rpx;
}

.month {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-right: 10rpx;
}

.year {
	font-size: 28rpx;
	color: #666;
}

.weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
	margin-bottom: 20rpx;
}

.weekdays text {
	font-size: 28rpx;
	color: #999;
}

.days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 10rpx;
}

.day-item {
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #F8F8F8;
	border-radius: 8rpx;
	position: relative;
}

.day-item.empty {
	background-color: transparent;
}

.day-item.signed {
	background-color: #FFE4E4;
}

.day-item.today {
	background-color: #D02B29;
}

.day-item.selected {
	background-color: #FFE4E4;
	animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.1); }
	100% { transform: scale(1); }
}

.day-number {
	font-size: 28rpx;
	color: #333;
}

.day-item.today .day-number {
	color: #FFFFFF;
}

.day-reward {
	font-size: 20rpx;
	color: #D02B29;
	margin-top: 4rpx;
}

.sign-rewards {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
}

.rewards-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.rewards-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.reward-item {
	flex: 1;
	min-width: 200rpx;
	height: 100rpx;
	background-color: #F8F8F8;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.reward-item.received {
	background-color: #FFE4E4;
}

.reward-day {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 4rpx;
}

.reward-value {
	font-size: 28rpx;
	color: #D02B29;
	font-weight: bold;
}

.rules {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 30rpx;
	margin: 20rpx;
}

.rules-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.rules-content {
	font-size: 26rpx;
	color: #666;
	line-height: 1.8;
}

.rules-content text {
	display: block;
}

.my-prizes {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 30rpx;
	margin: 20rpx;
}

.prizes-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.prize-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #EEEEEE;
}

.prize-item:last-child {
	border-bottom: none;
}

.prize-icon {
	width: 80rpx;
	height: 80rpx;
	margin-right: 20rpx;
}

.prize-info {
	flex: 1;
}

.prize-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 4rpx;
	display: block;
}

.prize-value {
	font-size: 24rpx;
	color: #D02B29;
}

.prize-status {
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.prize-status.pending {
	color: #D02B29;
	background-color: #FFE4E4;
}

.prize-status.received {
	color: #999;
	background-color: #F5F5F5;
}
</style> 